<template>
    <div >
      <Row type="flex">
            <Col flex="40px"><i-menu-head v-if="headerMenu && !isMobile" ref="menuHead" /></Col>
            <!-- <Col flex="auto" v-if="!menuCollapse"  style="background: #2d2d2d;height: 866px; max-height:866px"> 修改于3/18 -->
            <Col flex="auto" v-if="!menuCollapse"  style="background: #2d2d2d;">
                <Menu
                        ref="menu"
                        class="i-layout-menu-side i-scrollbar-hide"
                        :class="{ 'i-layout-menu-side-collapse': menuCollapse }"
                        :theme="siderTheme"
                        :accordion="menuAccordion"
                        :active-name="activePath"
                        :open-names="openNames"
                        width="auto">
                    <template v-for="(item, index) in filterSider">
                        <i-menu-side-item v-if="item.children === undefined || !item.children.length" :menu="item" :key="index" />
                        <i-menu-side-submenu v-else :menu="item" :key="index" />
                    </template>
                </Menu>
            </Col>
        </Row>
    </div>

</template>
<script>
    import iMenuSideItem from './../menu-side/menu-item';
    import iMenuSideSubmenu from './../menu-side/submenu';
    import iMenuSideCollapse from './menu-collapse';
    import tTitle from '../mixins/translate-title';
    import iMenuHead from './../menu-head';
    import { mapState, mapGetters } from 'vuex';
    // 元素是否在可视区域
    function isElementInViewport (el) {
        let rect = el.getBoundingClientRect();
        return (rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth));
    }
    export default {
        name: 'iMenuSide',
        mixins: [tTitle],
        components: { iMenuSideItem, iMenuSideSubmenu, iMenuSideCollapse, iMenuHead },
        props: {
            hideLogo: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            ...mapState('admin/layout', [
                'siderTheme',
                'menuAccordion',
                'headerMenu',
                'isMobile',
                'menuCollapse'
            ]),
            ...mapState('admin/menu', ['activePath', 'openNames']),
            ...mapGetters('admin/menu', ['filterSider'])

        },
        watch: {
            $route: {
                handler () {
                    this.handleUpdateMenuState();
                },
                immediate: true
            },
            // 在展开/收起侧边菜单栏时，更新一次 menu 的状态
            menuCollapse () {
                this.handleUpdateMenuState();
            }
        },
        methods: {
            handleUpdateMenuState () {
                this.$nextTick(() => {
                    if (this.$refs.menu) {
                        this.$refs.menu.updateActiveName();
                        if (this.menuAccordion) this.$refs.menu.updateOpened();
                        // 聚焦当前项
                        this.$nextTick(() => {
                            const $activeMenu = document.getElementsByClassName('ivu-menu-item ivu-menu-item-active ivu-menu-item-selected');
                            if ($activeMenu && $activeMenu.length && !isElementInViewport($activeMenu[0])) {
                                const activeMenuTop = $activeMenu[0].getBoundingClientRect().top;
                                const $menu = this.$refs.menu.$el;
                                setTimeout(() => {
                                    this.$ScrollTop($menu, {
                                        to: activeMenuTop,
                                        time: 0
                                    });
                                }, 300);
                            }
                        });
                    }
                });
            }
        },
        mounted () {

        }
    };
</script>
